<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Warrior">
    <title>轮播图</title>
    <script src="./js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" type="" href="./css/bootstrap.min.css">
    <style>
        #slideBox {
            width: 800px;
            height: 400px;
            border: 1px solid red;
            position: relative;
        }

        .imgBox {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #slideBox .imgBox img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .show {
            display: inline-block;
        }

        .indicators {
            position: absolute;
            left: 300px;
            bottom: 20px;
        }

        .buttons {
            position: relative;
        }

        #prev{
            position: absolute;
            top: 180px;
            left: 20px;
        }
        #next{
            position: absolute;
            top: 180px;
            right: 20px;
        }
        .buttons div{
            width:20px;
            height: 40px;
            background-color: black;
            opacity: 0;
        }
        .buttons div p{
            color: white;
            width:20px;
            height: 40px;
            line-height: 40px;
        }

        .indicators span {
            display: inline-block;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: white;
        }

        .indicators span.current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="slideBox">
        <div class="imgBox">
            <img src="./img/1-1-1.jpg" alt="" class="show">
            <img src="./img/1-1-2.jpg" alt="">
            <img src="./img/1-1-3.jpg" alt="">
            <img src="./img/1-1-4.jpg" alt="">
            <img src="./img/1-1-5.jpg" alt="">
            <img src="./img/1-1-6.jpg" alt="">
            <img src="./img/1-1-7.jpg" alt="">
            <img src="./img/1-1-8.jpg" alt="">
        </div>
        <div class="indicators">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="buttons">
            <div id="prev" ><p class="glyphicon glyphicon-menu-left"></p></div>
            <div id="next" ><p class="glyphicon glyphicon-menu-right"></p></div>
        </div> 
    </div>
    <script>
        var index = 0;
        var timer = setInterval(changeIndex, 2000);

        function changeIndex() {
            index = index >= $('img').length - 1 ? 0 : index + 1;
            changeImage();
        }

        function changeImage() {
            $('img').eq(index).fadeIn('fast').siblings().fadeOut('fast');
            $('.indicators span').eq(index).addClass('current').siblings().removeClass('current');
        }

        $('#prev').click(function () {
            index = index <= 0 ? $('img').length - 1 : index - 1;
            changeImage();
        })

        $('#next').click(function () {
            changeIndex();
        })

        $('.indicators span').hover(function(){
            clearInterval(timer);
            index = $(this).index();
            changeImage();
        },function(){
            timer = setInterval(changeIndex,2000);
        })
        $('.buttons div').hover(function(){
            $('.buttons div').css('opacity','0.4');
            clearInterval(timer);
        },function(){
            $('.buttons div').css('opacity','0');
            timer = setInterval(changeIndex,2000);
        })
    </script>
</body>

</html>